<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>采购单</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">

  <link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link type="text/css" rel="stylesheet" charset="UTF-8"
    href="https://translate.googleapis.com/translate_static/css/translateelement.css">
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <script src="plugins/jquery/jquery.js"></script>
  <script type="text/javascript">

  </script>
</head>

<body class="hold-transition sidebar-mini">
  <div id="all_three" class="wrapper">
    <!-- /.content-header -->
    <!-- 采购单 -->
    <div id="demand8" class="card-body" style="margin-left: 1%; margin-right: 1%;">
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <li class="nav-item d-none d-sm-inline-block"><a href="#" class="nav-link"> <i
                class="fas fa-paw nav-icon"></i>
              <p>黄金品类</p>
            </a></li>
          <li class="nav-item d-none d-sm-inline-block"><a href="#" class="nav-link" onclick="purchase()"> <i
                class="fas fa-plus nav-icon"></i>
              <p>新增采购单</p>
            </a></li>
          <li id="export2" class="nav-item d-none d-sm-inline-block"><a data-type="xls" href="javascript:;"
              class="nav-link"> <i class="fas  fa-random nav-icon"></i>导出
            </a></li>
        </ul>
      </nav>

      <div class="card">
        <!-- /.card-header -->
        <div class="card-body">
          <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">

          </div>
          <div class="row">
            <div class="col-sm-12">
              <table id="example8" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
                aria-describedby="example1_info">
                <thead class="text-center">
                  <tr role="row">
                    <th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">单号
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Browser: activate to sort column ascending">供应商</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Platform(s): activate to sort column ascending">采购部门</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Platform(s): activate to sort column ascending">采购重量</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Platform(s): activate to sort column ascending">采购数量</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Platform(s): activate to sort column ascending">采购人</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Engine version: activate to sort column ascending">采购时间</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="CSS grade: activate to sort column ascending">状态</th>
                    <th tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="CSS grade: activate to sort column ascending">操作</th>
                  </tr>
                </thead>

                <tbody class="text-center">
                  <tr role="row" class="odd" style="display: none;">
                    <td class="" tabindex="0">Gecko</td>
                    <td style="">Epiphany 2.20</td>
                    <td style="">Gnome</td>
                    <td style="">Epiphany 2.20</td>
                    <td style="">Gnome</td>
                    <td style="">Epiphany 2.20</td>
                    <td style="">Gnome</td>
                    <td style="">Gnome</td>
                    <td  style="">1.8</td>
                  </tr>
                  <tr v-for="(procure,index) in procurements" role="row" class="odd">
                    <td tabindex="0" class="sorting_1"><a href="#" onclick="gotoprocuredetail()"
                        @click="changeprocure(procure.orderno,index)">{{procure.orderno}}</a></td>
                    <td>{{procure.supplier}}</td>
                    <td>{{procure.prodepartment}}</td>
                    <td>{{procure.weight}}</td>
                    <td>{{procure.num}}</td>
                    <td>{{procure.name}}</td>
                    <td>{{procure.time}}</td>
                    <td>{{procure.status}}</td>
                    <td>
                      <div class="dropdown">
                        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">...
                          <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                          <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="#" onclick="gotochangeprocure()"
                              @click="changeprocure(procure.orderno,index)">编辑采购单</a>
                          </li>
                          <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="#" onclick="gotoprocuredetail()"
                              @click="changeprocure(procure.orderno,index)">采购单详情</a>
                          </li>
                        </ul>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增采购单 -->
    <div id="demand9" class="card-body" style="padding: 0px;margin-left: 1%; margin-right: 1%;display: none;">
      <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar col-sm-4">
            <li class="nav-item d-none d-sm-inline-block">
              <a class="nav-link">
                <p>新增采购单</p>
              </a>
            </li>

          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-5">

          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-2">
            <button class="btn btn-primary" @click="insertbuy()"><i
                class="fas  fa-edit nav-icon"></i>&nbsp;保存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-primary" onclick="gotopro()"><i class="fas  fa-reply nav-icon"></i>&nbsp;返回</button>
          </ul>

        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light" style="height: 1px;">
          <hr style="height: 0.1px; width: 100%;background-color: lightgray;">
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar col-sm-4">
            <li class="nav-item d-none d-sm-inline-block">
              <a class="nav-link">
                <i class="fas fa-signal nav-icon"></i>
                <p>基本信息</p>
              </a>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>产品线:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buy_line">
                <option>A产品线</option>
                <option>B产品线</option>
                <option>C产品线</option>
              </select>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品类:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buy_category">
                <option>玉石</option>
                <option>黄金</option>
                <option>玛瑙</option>
              </select>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative; left: -15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>表单类型:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: -15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buy_formtype">
                <option>采购入库</option>
                <option>采购退货</option>
              </select>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;采购人:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <input type="text" style="height: 40px; width: 200px;" v-model="buy_name">
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar">
            <li class="nav-item d-none d-sm-inline-block">
              <a>供应商:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buy_supplier">
                <option>中国黄金</option>
                <option>老凤祥</option>
                <option>六福珠宝</option>
                <option>周大福</option>
                <option>盛峰珠宝</option>
                <option>着讯互联</option>
              </select>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar  ">
            <li class="nav-item d-none d-sm-inline-block">
              <a>成色:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buy_quality">
                <option>千足金9999</option>
                <option>万足金10000</option>
              </select>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>制单时间:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <input type="datetime-local" class="measureDate" style="height: 40px; width: 200px;" v-model="buy_time">
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;状态:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buy_status">
                <option>采购中</option>
              </select>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar  ">
            <li class="nav-item d-none d-sm-inline-block">
              <a>单号:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <input type="text" style="height: 40px; width: 200px;" v-model="buy_orderno">
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar" style="margin-left:2%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重量:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <input type="text" style="height: 40px; width: 200px;" v-model="buy_weight">
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative;left: 20px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>数量:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative;left: 20px;">
            <li class="nav-item d-none d-sm-inline-block">
              <input type="text" style="height: 40px; width: 200px;" v-model="buy_num">
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;仓库:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buy_storehouse">
                <option>A仓库</option>
                <option>B仓库</option>
                <option>C仓库</option>
                <option>D仓库</option>
              </select>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>采购部门:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buy_prodepartment">
                <option>精品柜A</option>
                <option>精品柜B</option>
                <option>精品柜C</option>
              </select>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar col-sm-4">
            <li class="nav-item d-none d-sm-inline-block">
              <a class="nav-link">
                <i class="fas fa-signal nav-icon"></i>
                <p>产品信息</p>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <div class="col-sm-12">
          <table id="example9" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
            aria-describedby="example1_info">
            <thead class="text-center">
              <tr role="row">
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Browser: activate to sort column ascending">单号</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">产品名称</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">供应商</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">制单时间</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">重量</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">数量</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="CSS grade: activate to sort column ascending">规格</th>

              </tr>
            </thead>

            <tbody class="text-center">
              <tr role="row" class="odd" style="display: none;">
                <td class="" tabindex="0">Gecko</td>
                <td style="">Epiphany 2.20</td>
                <td style="">Gnome</td>
                <td style="">Epiphany 2.20</td>
                <td style="">Gnome</td>
                <td style="">Epiphany 2.20</td>
                <td style="">Gnome</td>
                <td style="">Gnome</td>
                <td  style="">1.8</td>
              </tr>
              <tr v-for="(procure,index) in procurements" role="row" class="odd">
                <td tabindex="0" class="sorting_1"><a href="#" onclick="gotoprocuredetail1()"
                    @click="changeprocure(procure.orderno,index)">{{procure.orderno}}</a></td>
                <td>{{procure.category}}{{procure.quality}}</td>
                <td>{{procure.supplier}}</td>
                <td>{{procure.time}}</td>
                <td>{{procure.weight}}</td>
                <td>{{procure.num}}</td>
                <td>{{procure.status}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </nav>
    </div>

    <!-- 编辑采购单 -->
    <div id="demand10" class="card-body" style="padding: 0px;margin-left: 1%; margin-right: 1%;display: none;">
      <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar col-sm-4">
            <li class="nav-item d-none d-sm-inline-block">
              <a class="nav-link">
                <p>编辑采购单</p>
              </a>
            </li>

          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-5">

          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-2">
            <button class="btn btn-primary" @click="updatepro()"><i
                class="fas  fa-edit nav-icon"></i>&nbsp;保存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-primary" onclick="gotoprocurement1()"><i
                class="fas  fa-reply nav-icon"></i>&nbsp;返回</button>
          </ul>

        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light" style="height: 1px;">
          <hr style="height: 0.1px; width: 100%;background-color: lightgray;">
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar col-sm-4">
            <li class="nav-item d-none d-sm-inline-block">
              <a class="nav-link">
                <i class="fas fa-signal nav-icon"></i>
                <p>基本信息</p>
              </a>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>产品线:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buyline">
                <option>A产品线</option>
                <option>B产品线</option>
                <option>C产品线</option>
              </select>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品类:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buycategory">
                <option>玉石</option>
                <option>黄金</option>
                <option>玛瑙</option>
              </select>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>仓库:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buystorehouse">
                <option>A仓库</option>
                <option>B仓库</option>
                <option>C仓库</option>
                <option>D仓库</option>
              </select>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar" style="margin-left:1%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;制单人:</a><label>{{pros.name}}</label>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative;left: 305px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>供应商:</a><label>{{pros.supplier}}</label>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative;left: 550px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>成色:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative;left: 550px;">
            <li class="nav-item d-none d-sm-inline-block">
              <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="buyquality">
                <option>千足金9999</option>
                <option>万足金10000</option>
              </select>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>制单时间:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <input type="datetime-local" class="measureDate" style="height: 40px; width: 200px;" v-model="buytime">
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative;left: 5px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;状态:</a><label>{{pros.status}}</label>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative;left: 260px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>单号:</a><label>{{pros.orderno}}</label>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar col-sm-4">
            <li class="nav-item d-none d-sm-inline-block">
              <a class="nav-link">
                <i class="fas fa-signal nav-icon"></i>
                <p>产品信息</p>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <div class="col-sm-12">
          <table id="example10" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
            aria-describedby="example1_info">
            <thead class="text-center">
              <tr role="row">
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Browser: activate to sort column ascending">产品编码</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">产品名称</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">供应商</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">制单时间</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">数量</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Engine version: activate to sort column ascending">重量</th>
                <th tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="CSS grade: activate to sort column ascending">操作</th>
              </tr>
            </thead>

            <tbody class="text-center">
              <tr v-for="(procure,index) in procurements" role="row" class="odd">
                <td tabindex="0" class="sorting_1"><a href="#" onclick="gotoprocuredetail2()"
                    @click="changeprocure(procure.orderno,index)">{{procure.orderno}}</a></td>
                <td>{{procure.category}}{{procure.quality}}</td>
                <td>{{procure.supplier}}</td>
                <td>{{procure.time}}</td>
                <td>{{procure.num}}</td>
                <td>{{procure.weight}}</td>
                <td><button type="button" class="btn btn-default btn-sm" @click="delpro(procure.orderno)"><i
                      class="fas fa-trash"></i></button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </nav>
    </div>

    <!-- 采购单详情 -->
    <div id="demand11" class="card-body" style="margin-left: 1%; margin-right: 1%;padding: 0px;display: none;">
      <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar col-sm-4">
            <li class="nav-item d-none d-sm-inline-block">
              <a class="nav-link">
                <p>采购单详情</p>
              </a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-4">

          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-4">
            <button type="button" class="btn btn-default" @click="upone()"><i
                class="fas fa-chevron-left">上一条</i></button>&nbsp;&nbsp;
            <button type="button" class="btn btn-default" @click="downone()"><i
                class="fas fa-chevron-right">下一条</i></button>&nbsp;&nbsp;
            <button type="button" class="btn btn-default" onclick="gotoprocurement2()"><i
                class="fas fa-paint-brush">编辑</i></button>&nbsp;&nbsp;
            <button type="button" class="btn btn-primary" onclick="gotoprocurement3()"><i
                class="fas fa-reply">返回</i></button>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light" style="height: 1px;">
          <hr style="height: 0.1px; width: 100%;background-color: lightgray;">
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar col-sm-4">
            <li class="nav-item d-none d-sm-inline-block">
              <a class="nav-link">
                <i class="fas fa-signal nav-icon"></i>
                <p>基本信息</p>
              </a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-4">

          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-4">
            <button type="button" class="btn btn-primary" @click="submittt()"><i class="fas fa-reply">提交</i></button>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>表单类型:</a><label>{{proments.formtype}}</label>
            </li>
          </ul>

          <ul class="navbar-nav nav-sidebar" style="position: relative;left: 240px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品类:</a><label>{{proments.category}}</label>
            </li>
          </ul>

          <ul class="navbar-nav nav-sidebar" style="position: relative;left: 520px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>仓库:</a><label>{{proments.storehouse}}</label>
            </li>
          </ul>

        </nav>

        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>制单时间:</a><label>{{proments.time}}</label>
            </li>
          </ul>

          <ul class="navbar-nav nav-sidebar" style="position: relative;left: 180px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;状态:</a><label>{{proments.status}}</label>
            </li>
          </ul>

          <ul class="navbar-nav nav-sidebar" style="position: relative;left: 455px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>单号:</a><label>{{proments.orderno}}</label>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;采购人:</a><label>{{proments.name}}</label>
            </li>
          </ul>


          <ul class="navbar-nav nav-sidebar" style="position: relative;left: 310px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>成色:</a><label>{{proments.quality}}</label>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar col-sm-4">
            <li class="nav-item d-none d-sm-inline-block">
              <a class="nav-link">
                <i class="fas fa-signal nav-icon"></i>
                <p>产品信息</p>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <div class="col-sm-12">
          <table id="example11" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
            aria-describedby="example1_info">
            <thead class="text-center">
              <tr role="row">
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Browser: activate to sort column ascending">产品编码</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">产品名称</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">供应商</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">成色</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">重量</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">数量</th>
                <th tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Engine version: activate to sort column ascending">操作</th>
              </tr>
            </thead>

            <tbody class="text-center">
              <tr v-for="(procure,index) in procurements" role="row" class="odd">
                <td tabindex="0" class="sorting_1"><a href="#"
                    @click="changeprocure(procure.orderno,index)">{{procure.orderno}}</a></td>
                <td>{{procure.category}}{{procure.quality}}</td>
                <td>{{procure.supplier}}</td>
                <td>{{procure.quality}}</td>
                <td>{{procure.weight}}</td>
                <td>{{procure.num}}</td>
                <td><button type="button" class="btn btn-default btn-sm" @click="delpro(procure.orderno)"><i
                      class="fas fa-trash"></i></button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </nav>
    </div>
    <script type="text/javascript">
      var pindex = 0;
      var der = null;
      var pstatus = null;
      new Vue({
        el: "#all_three",
        data: {
          procurements: [],
          pros: [],
          proments: [],

          //新增采购
          buy_orderno: "",
          buy_supplier: "",
          buy_prodepartment: "",
          buy_weight: "",
          buy_num: "",
          buy_name: "",
          buy_time: "",
          buy_status: "",
          buy_category: "",
          buy_line: "",
          buy_storehouse: "",
          buy_quality: "",
          buy_formtype: "",
          //编辑采购单
          buyline: "",
          buycategory: "",
          buyquality: "",
          buytime: "",
          buystorehouse: ""
        },
        created() {
          axios
            .get("procurement/findProcurement")
            .then(res => {
              //console.info(res.data)
              this.procurements = res.data;
            })
        },
        methods: {
          changeprocure: function (procureorderno, index) {
            pindex = index;
            this.proments = this.procurements[index];
            pstatus = this.procurements[index].status;
            //console.info(this.proments);
            der = procureorderno;
            axios
              .get("procurement/findProcurementByOrderno", {
                params: {
                  orderno: procureorderno
                }
              })
              .then(res => {
                //console.info(res.data)
                this.pros = res.data;
              })
          },
          insertbuy: function () {
            if (this.buy_orderno == "" || this.buy_line == "" || this.buy_category == "" || this.buy_storehouse == "" || this.buy_weight == "" || this.buy_num == "" || this.buy_quality == "" || this.buy_time == "" || this.buy_status == "" || this.buy_name == "" || this.buy_formtype == "" || this.buy_client == "" || this.buy_prodepartment == "" || this.buy_supplier == "") {
              alert("请填写完整，不能为空");
            }else{
              axios
              .get("procurement/insertProcurement", {
                params: {
                  orderno: this.buy_orderno,
                  supplier: this.buy_supplier,
                  prodepartment: this.buy_prodepartment,
                  weight: this.buy_weight,
                  num: this.buy_num,
                  name: this.buy_name,
                  time: this.buy_time,
                  status: this.buy_status,
                  category: this.buy_category,
                  line: this.buy_line,
                  storehouse: this.buy_storehouse,
                  quality: this.buy_quality,
                  formtype: this.buy_formtype
                }
              })
              .then(res => {
                alert(res.data.message);
              })
            }
          },
          updatepro: function () {
            axios
              .get("procurement/updateProcurement", {
                params: {
                  orderno: der,
                  time: this.buytime,
                  category: this.buycategory,
                  line: this.buyline,
                  storehouse: this.buystorehouse,
                  quality: this.buyquality
                }
              })
              .then(res => {
                alert(res.data.message);
              })
          },
          delpro: function (disno) {
            axios
              .get("procurement/delProcurement", {
                params: {
                  orderno: disno
                }
              })
              .then(res => {
                alert(res.data.message);
                var pros = this.procurements;
                if (res.data.message == "删除成功") {
                  for (var i = 0; i < pros.length; i++) {
                    var p = pros[i];
                    if (p.orderno == disno) {
                      pros.splice(i, 1);
                      //重新赋值
                      this.pros = pros;
                      break;
                    }
                  }
                }
              })
          },
          upone: function () {
            pindex = pindex - 1;
            if (pindex < 0) {
              pindex = 0;
              alert("已经是第一条了");
            }
            this.proments = this.procurements[pindex];
            //console.info(this.proments);
          },
          downone: function () {
            pindex = pindex + 1;
            if (pindex > this.procurements.length - 1) {
              pindex = this.procurements.length - 1;
              alert("已经是最后一条了");
            }
            this.proments = this.procurements[pindex];
            //console.info(this.proments);
          },
          submittt: function () {
            axios
              .get("procurement/changeStatus", {
                params: {
                  orderno: this.procurements[pindex].orderno,
                  status: "已完成"
                }
              })
              .then(res => {
                alert(res.data.message);
              })
          }
        }
      });

      function purchase() {
        document.getElementById("demand9").style.display = "";
        document.getElementById("demand8").style.display = "none";
        document.getElementById("demand10").style.display = "none";
        document.getElementById("demand11").style.display = "none";
      }
      function gotochangeprocure() {
        document.getElementById("demand10").style.display = "";
        document.getElementById("demand8").style.display = "none";
      }
      function gotoprocuredetail() {
        document.getElementById("demand11").style.display = "";
        document.getElementById("demand8").style.display = "none";
      }
      function gotoprocuredetail1() {
        document.getElementById("demand11").style.display = "";
        document.getElementById("demand9").style.display = "none";
      }
      function gotoprocuredetail2() {
        document.getElementById("demand11").style.display = "";
        document.getElementById("demand10").style.display = "none";
      }
      function gotoprocurement1() {
        window.location.href = "/procurement.html";
      }
      function gotoprocurement2() {
        if (pstatus == "已完成") {
          alert("订单" + pstatus + "，请勿重复提交");
        } else {
          document.getElementById("demand10").style.display = "";
          document.getElementById("demand11").style.display = "none";
        }
      }
      function gotoprocurement3() {
        window.location.href = "/procurement.html";
      }
      function gotopro() {
        window.location.href = "/procurement.html";
      }
    </script>
  </div>
  <!-- ./wrapper -->

  <!-- REQUIRED SCRIPTS -->
  <!-- jQuery -->
  <script src="plugins/jquery/jquery.min.js"></script>

  <!-- Bootstrap -->
  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE -->
  <script src="dist/js/adminlte.js"></script>

  <!-- OPTIONAL SCRIPTS -->
  <script src="plugins/chart.js/Chart.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="dist/js/demo.js"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="dist/js/pages/dashboard3.js"></script>

  <script src="plugins/datatables/jquery.dataTables.min.js"></script>
  <script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
  <script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
  <script src="dist/js/adminlte.min.js"></script>
  <script src="build/js/Blob.js"></script>
  <script src="build/js/FileSaver.js"></script>
  <script src="build/js/tableExport.js"></script>
  <script>
    var $exportLink = document.getElementById('export2');
    $exportLink.addEventListener('click', function (e) {
      e.preventDefault();
      if (e.target.nodeName === "A") {
        tableExport('example8', 'Erp采购单', e.target.getAttribute('data-type'));
      }
    }, false);
  </script>
  <script>
    $(function () {
      $("#example8").DataTable({
        "responsive": true,
        "autoWidth": false,
      });
      $("#example9").DataTable({
        "responsive": true,
        "autoWidth": false,
      });
      $("#example10").DataTable({
        "responsive": true,
        "autoWidth": false,
      });
      $("#example11").DataTable({
        "responsive": true,
        "autoWidth": false,
      });

    });
  </script>
</body>

</html>